@extends('wx.layout.cslnbj')

@section('wx.pbody')

  @if( $warehouse)
    <div class="weui-form">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">答题活动已圆满结束</h2>
        <div class="weui-form__desc">请关注我们的公众号留意抽奖信息！</div>
      </div>
      <div class="weui-form__control-area"></div>
      <div class="weui-form__opr-area">
        <a href="#" class="weui-btn weui-btn_default">返回</a>
      </div>
    </div>
  @else

    <form class="form-horizontal" id="wx" autocomplete="off">
    <div class="weui-form">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">长沙市老年保健协会</h2>
        <div class="weui-form__desc">老年人慢性病防治知识有奖问答</div>
      </div>
      <div class="weui-form__control-area">
        {{ csrf_field() }}
        <input type="hidden" name="warehouse" value="{{$warehouse->id}}">
        @foreach($warehouse->items as $i=>$item)
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">{{$i+1}}、{{ $item->question->title}} {{$item->question->single==0?'(多选)':''}}</div>
            <input type="hidden" name="question{{$i+1}}" value="{{$item->question->id}}">
            <div class="weui-cells weui-cells_checkbox" >
              @foreach($item->question->options as $opt)
              <label class="weui-cell weui-cell_active weui-check__label" for="opt{{$opt->id}}" >
                  <div class="weui-cell__hd">
                      <input type="{{$item->question->single==1?'radio':'checkbox'}}" class="weui-check answer" name="radio{{$i+1}}" id="opt{{$opt->id}}" value="{{$item->question->id}},{{$opt->id}}">
                      <span class="weui-icon-checked"></span>
                  </div>
                  <div class="weui-cell__bd">
                      <p>{{$opt->content}}</p>
                  </div>

              </label>
              @endforeach
            </div>

          </div>
        @endforeach

        <div class="weui-form__control-area">
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">答题人信息</div>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell weui-cell_active">
                <div class="weui-cell__hd"><label class="weui-label">姓名 <span class="red">*</span></label></div>
                <div class="weui-cell__bd">
                    <input name="name" type="text" class="weui-input" placeholder="答题人姓名">
                </div>
              </div>
              <div class="weui-cell weui-cell_active">
                <div class="weui-cell__hd"><label class="weui-label">证件号码 <span class="red">*</span></label></div>
                <div class="weui-cell__bd">
                    <input name="idcard" type="text" class="weui-input" placeholder="请填写身份证号">
                </div>
              </div>
              <div class="weui-cell weui-cell_active">
                <div class="weui-cell__hd"><label class="weui-label">所属地区</label></div>
                <div class="weui-cell__bd">
                    <input name="region" type="text" class="weui-input" placeholder="区县填写">
                </div>
              </div>
              <div class="weui-cell weui-cell_active">
                <div class="weui-cell__hd"><label class="weui-label">手机号码 <span class="red">*</span></label></div>
                <div class="weui-cell__bd">
                    <input name="mobile" class="weui-input" placeholder="请输入手机号码" type="number" pattern="[0-9]*">
                </div>
              </div>
              <div class="weui-cell weui-cell_active">
                <div class="weui-cell__hd"><label class="weui-label">验证码 <span class="red">*</span></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" pattern="[0-9]*" name="smscode" placeholder="输入验证码" maxlength="6">
                </div>
              </div>
              <div class="weui-cell weui-cell_active weui-cell_vcode">
                <div class="weui-cell__hd"></div>
                <div class="weui-cell__bd">
                </div>
                <div class="weui-cell__bd">
                  <button class="weui-btn weui-btn_default weui-vcode-btn sms">获取验证码</button>
                </div>
              </div>
            </div>
          </div>
        </div>

      <div class="weui-form__opr-area">
        <button class="weui-btn weui-btn_primary" id="btnAnwser">提交答案</button>
      </div>

    </div>
    </form>

  @endif



@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(function() {


      $("#wx").validate({

              onfocusout: false,
              onkeyup: false,

              rules: {
                  radio1: {required: true},radio2: {required: true},radio3: {required: true},radio4: {required: true},
                  radio5: {required: true},radio6: {required: true},radio7: {required: true},radio8: {required: true},
                  radio9: {required: true},radio10: {required: true},radio11: {required: true},radio12: {required: true},
                  radio13: {required: true},radio14: {required: true},radio15: {required: true},radio16: {required: true},
                  radio17: {required: true},radio18: {required: true},radio19: {required: true},radio20: {required: true},
                  radio21: {required: true},radio22: {required: true},radio23: {required: true},radio24: {required: true},
                  radio25: {required: true},radio26: {required: true},radio27: {required: true},radio28: {required: true},
                  radio29: {required: true},radio30: {required: true},radio31: {required: true},radio32: {required: true},
                  radio33: {required: true},radio34: {required: true},radio35: {required: true},radio36: {required: true},
                  name:{required:true, isChinese: true, minlength: 2},
                  idcard:{required:true, isIdCardNo: true},
                  mobile:{required:true, isMobile: true},
                  smscode: {required: true, digits: true, maxlength: 6, minlength: 6}
              },
              messages: {
                  radio1: {required: "请选择第1题的答案"},radio2: {required: "请选择第2题的答案"},radio3: {required: "请选择第3题的答案"},
                  radio4: {required: "请选择第4题的答案"},radio5: {required: "请选择第5题的答案"},radio6: {required: "请选择第6题的答案"},
                  radio7: {required: "请选择第7题的答案"},radio8: {required: "请选择第8题的答案"},radio9: {required: "请选择第9题的答案"},
                  radio10: {required: "请选择第10题的答案"},radio11: {required: "请选择第11题的答案"},radio12: {required: "请选择第12题的答案"},
                  radio13: {required: "请选择第13题的答案"},radio14: {required: "请选择第14题的答案"},radio15: {required: "请选择第15题的答案"},
                  radio16: {required: "请选择第16题的答案"},radio17: {required: "请选择第17题的答案"},radio18: {required: "请选择第18题的答案"},
                  radio19: {required: "请选择第19题的答案"},radio20: {required: "请选择第20题的答案"},radio21: {required: "请选择第21题的答案"},
                  radio22: {required: "请选择第22题的答案"},radio23: {required: "请选择第23题的答案"},radio24: {required: "请选择第24题的答案"},
                  radio25: {required: "请选择第25题的答案"},radio26: {required: "请选择第26题的答案"},radio27: {required: "请选择第27题的答案"},
                  radio28: {required: "请选择第28题的答案"},radio29: {required: "请选择第29题的答案"},radio30: {required: "请选择第30题的答案"},
                  radio31: {required: "请选择第31题的答案"},radio32: {required: "请选择第32题的答案"},radio33: {required: "请选择第33题的答案"},
                  radio34: {required: "请选择第34题的答案"},radio35: {required: "请选择第35题的答案"},radio36: {required: "请选择第36题的答案"},
                  name: {required: "请填写姓名", minlength: "名字不合法"},
                  idcard: {required: "请填写身份证号码", isIdCardNo: "身份证号码不正确"},
                  mobile: {required: "请填写手机号码"},
                  smscode: {required: "请填写验证码", maxlength: "验证码格式不正确", minlength: "验证码格式不正确", digits: "验证码格式不正确"}
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.msg(v.message, {shift: -1, time: 2000});
                      return false;
                  });
              },

              submitHandler: function (form) {

                  var answer = {};
                  $(".answer").each(function(i){
                    if(this.checked){
                      answer[i] = $(this).val();
                    }
                  });

                  $.post('{{route('wx.settle.quiz')}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'id': $("input[name='warehouse']").val(),
                      'name': $("input[name='name']").val(),
                      'idcard': $("input[name='idcard']").val(),
                      'mobile': $("input[name='mobile']").val(),
                      'region': $("input[name='region']").val(),
                      'smscode': $("input[name='smscode']").val(),
                      'answer': answer,
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }

          });


      $('.sms').on('click', function () {

          var uri = '{{route('wx.sms')}}';

          $.post(uri, {
              '_token': $("input[name='_token']").attr('value'),
              'mobile': $("input[name='mobile']").val(),
              'is_submit': true
          }, function (data) {
              layer.msg(data.message, {time: 1000, shift: -1}, function () {
                  if (data.status === true && data.url != null) {
                      $(window).attr('location', data.url);
                  }
              });

          }, 'json').error(function (data) {
              layer.msg(data.responseJSON.message);
          });

          var count = 60;
          const countDown = setInterval(() => {

              if (count === 0) {
                  $(this).text('获取验证码').removeAttr('disabled');
                  $(this).removeClass("grey");
                  clearInterval(countDown);
              } else {
                  $(this).attr('disabled', true);
                  $(this).addClass("grey");
                  $(this).text(count + '秒后重新发送');
              }
              count--;
          }, 1000);

      });

    });
  </script>
@stop